<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:fn="http://java.sun.com/jsp/jstl/functions">
    <ui:composition template="/layout/masterPageNotHeaderSearch.xhtml">
        <ui:define name="ui-header">
            <title>#{utilsController.getLanguages("RepairAndCare")}</title>
        </ui:define>
        <ui:define name="ui-content">
            <style>
                .servive-block{
                    padding: 20px 16px;
                }
                .repairCareItem{
                    padding: 20px 16px;
                    text-align: left;
                    background: none;
                    border: none;
                }
                .a-group-item{
                    font-size: 16px;
                    position: relative;
                }
                .a-toggle:after {
                    color: #3498db;
                    content: "";
                    display: inline-block;
                    font-family: FontAwesome;
                    font-size: 17px;
                    font-weight: bold;
                    position: absolute;
                    right: -10px;
                    top: -5px;
                }
                .repair-title{
                    color: #098ae4 !important;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 20px;
                }
                .headerColor{
                    font-size: 28px;
                }
            </style>
            <div class="container content bg-gradient-body">
                <div class="row">
                    <div class="col-md-8">
                        <div class="panel panel-default rounded-2x">
                            <div class="panel-body">
                                <h2 class="headerColor">Car Financing Advice</h2>
                                <div class="row margin-bottom-10">
                                    <div class="col-md-4 col-sm-6">
                                        <div class="servive-block servive-block-default repairCareItem">
                                            <img src="/resourcesApp/img/Finance/dealership-finance-room.jpg"/>
                                            <h2 class="heading-md repair-title">Dealership Finance Room</h2>
                                            <p>
                                                Be prepared before entering the dealership finance room, because what's discussed there is negotiable.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <div class="servive-block servive-block-default repairCareItem">
                                            <img src="/resourcesApp/img/Finance/car-loans-what-you-need.jpg"/>
                                            <h2 class="heading-md repair-title">Car Loans: What You Need</h2>
                                            <p>
                                                Shopping for a loan isn't as fun as shopping for the car itself, but it's not as difficult as securing a mortgage either.
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-6">
                                        <div class="servive-block servive-block-default repairCareItem">
                                            <img src="/resourcesApp/img/Finance/get-the-best-interest-rates.jpg"/>
                                            <h2 class="heading-md repair-title">Get the Best Interest Rates</h2>
                                            <p>
                                                It's important to understand two things: the current marketplace for interest rates and your personal financial situation.
                                            </p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <img src="/resourcesApp/img/Finance/vcb.png" style="width: 360px;height: 300px;"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="panel panel-default rounded-2x">
                            <div class="panel-body">
                                <h2 class="headerColor">Car Financing Advice</h2>
                                <div class="row margin-bottom-10">
                                    <h:form class="sky-form rounded-2x" id="frmtuvanchovay">
                                        <p:growl id="growl" showDetail="true" sticky="true" escape="false"  />  
                                        <fieldset class="rounded-2x" style="padding: 25px 30px 20px">
                                            <section>
                                                <div class="col-md-6">
                                                    <c:set value="#{sI_NganHangController.findAllNganHang()}" var="vNganHang" scope="session"></c:set>
                                                    <label class="input">
                                                        <i class="icon-append fa fa-lock"></i>
                                                        <label class="select">
                                                            <select  id="cboNganHang"  onchange="cboTaiChinh_ChoVay_Change();">
                                                                <option value="0">#{utilsController.getLanguages("ChonNganHang")}</option>
                                                                <c:forEach items="#{vNganHang}" var="item">
                                                                    <option value="#{item.getID()}" selected="#{c_TuVanChoVayController.item.nganHangID==item.getID()?'selected':''}">#{item.getTenNH()}</option>
                                                                </c:forEach>
                                                            </select>
                                                            <i></i>
                                                        </label>

                                                        <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_ChonNganHang")}</b>
                                                    </label>

                                                </div>
                                                <div class="col-md-3">
                                                    <label class="input">
                                                        <i class="icon-append fa fa-lock"></i>
                                                        <label class="select">
                                                            <select  id="cboLoai" onchange="cboTaiChinh_ChoVay_Change();">
                                                                <option value="Y" selected="#{c_TuVanChoVayController.item.loai=='Y'?'selected':''}">#{utilsController.getLanguages("Year")}</option>
                                                                <option value="M" selected="#{c_TuVanChoVayController.item.loai=='M'?'selected':''}">#{utilsController.getLanguages("Month")}</option>
                                                            </select>
                                                            <i></i>
                                                        </label>

                                                        <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_ChonNganHang")}</b>
                                                    </label>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="input">
                                                        <i class="icon-append fa fa-lock"></i>
                                                        <label class="input">
                                                            <p:inputText  readonly="true" placeholder="#{utilsController.getLanguages('LaiSuat')}" value="#{c_TuVanChoVayController.item.laiXuat}" ></p:inputText>

                                                            <b class="tooltip tooltip-bottom-right">#{utilsController.getLanguages("rs_msg_LaiSuat")}</b>
                                                        </label>
                                                    </label>
                                                </div>
                                            </section>


                                        </fieldset>

                                        <p:remoteCommand name="TaiChinh_ChoVay_Change" actionListener="#{c_TuVanChoVayController.btnTaiChinh_ChoVay_Change}" update=":frmtuvanchovay" oncomplete="updateSelectboxValue_ChoVay()"></p:remoteCommand>
                                    </h:form>
                                </div>

                            </div>
                        </div>
                        <img src="/resourcesApp/img/Finance/vcb2.png" style="width: 100%;"/>
                    </div>
                    <div class="col-md-4">
                        <img src="/resourcesApp/img/Finance/vcb1.png" style="width: 360px;height: 300px;"/>
                        <img src="/resourcesApp/img/Finance/ls.png" style="width: 360px;height: 300px;"/>
                    </div>
                </div>

            </div>
        </ui:define>
    </ui:composition> 
</html>